<template>
    <div class="mod-config">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                    <el-form-item>
                        <el-input v-model="dataForm.jiDiMingCheng" placeholder="基地名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="dataForm.chanPinMingCheng" placeholder="产品名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="dataForm.shengChanPiHao" placeholder="生产批号" clearable></el-input>
                    </el-form-item>
<!--                    <el-form-item>
                        <el-input v-model="dataForm.zhaoHuiShiJian" placeholder="召回时间" clearable></el-input>
                    </el-form-item>-->
                    <el-form-item>
                        <el-input v-model="dataForm.zhaoHuiYuanYin" placeholder="召回原因" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="dataForm.zhaoHuiBaoGao" placeholder="召回报告" clearable></el-input>
                    </el-form-item>


            <el-form-item>
                <el-button @click="getDataList(1)">查询</el-button>
                <el-button type="primary" @click="addOrUpdateHandle()">新增
                </el-button>
                <el-button type="danger" @click="deleteHandle()"
                           :disabled="dataListSelections.length <= 0">批量删除
                </el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="dataList"
                border
                v-loading="dataListLoading"
                @selection-change="selectionChangeHandle"
                style="width: 100%;">
            <el-table-column
                    label="选中"
                    type="selection"
                    header-align="center"
                    align="center"
                    width="50">
            </el-table-column>
            <el-table-column
                    type="index"
                    label="序号"
                    header-align="center"
                    align="center"
                    width="50">
            </el-table-column>
                    <el-table-column
                            prop="jiDiMingCheng"
                            header-align="center"
                            align="center"
                            label="基地名称">
                    </el-table-column>
                    <el-table-column
                            prop="chanPinMingCheng"
                            header-align="center"
                            align="center"
                            label="产品名称">
                    </el-table-column>
                    <el-table-column
                            prop="shengChanPiHao"
                            header-align="center"
                            align="center"
                            label="生产批号">
                    </el-table-column>
                    <el-table-column
                            prop="zhaoHuiShiJian"
                            header-align="center"
                            align="center"
                            label="召回时间">
                    </el-table-column>
                    <el-table-column
                            prop="zhaoHuiYuanYin"
                            header-align="center"
                            align="center"
                            label="召回原因">
                    </el-table-column>
          <el-table-column
            prop="chuLiJieGuo"
            header-align="center"
            align="center"
            label="处理结果">
          </el-table-column>
            <el-table-column
              prop="pingGuJieGuo"
              header-align="center"
              align="center"
              label="评估结果">
            </el-table-column>
          <el-table-column
            prop="beiZhu"
            header-align="center"
            align="center"
            label="备注">
          </el-table-column>
<!--
                    <el-table-column
                            prop="suYuanMa"
                            header-align="center"
                            align="center"
                            label="溯源码">
                    </el-table-column>
                    <el-table-column
                            prop="chuLiJieGuo"
                            header-align="center"
                            align="center"
                            label="处理结果">
                    </el-table-column>

                 -->
            <el-table-column
                    fixed="right"
                    header-align="center"
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small"
                               @click="infoHandle(scope.row.id)"><i class="el-icon-edit"></i>查看详情</el-button>
                    <el-button type="text" size="small"
                               @click="addOrUpdateHandle(scope.row.id)"><i class="el-icon-edit"></i>修改</el-button>
                    <el-button type="text" size="small"
                               @click="deleteHandle(scope.row.id)"><i class="el-icon-delete"></i>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                :total="totalPage"
                layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <el-dialog title="添加或编辑" :visible.sync="addOrUpdateVisible">
            <el-form :rules="dataRule" :model="dataSaveForm" ref="dataSaveForm" @keyup.enter.native="dataFormSubmit()">
                <el-form-item hidden :label-width="'120px'"  prop="id">
                    <el-input v-model="dataSaveForm.id" autocomplete="off"></el-input>
                </el-form-item>
                        <el-form-item label="公告" :label-width="'120px'"   prop="guanLianGongGao">
                          <!--   :disabled="visibleGongGao"  v-if="visibleGongGao"-->
                          <el-input v-model="dataSaveForm.guanLianGongGaoBiaoTi" v-if="dataSaveForm.id" disabled autocomplete="off"></el-input>
                          <el-select  v-model="dataSaveForm.guanLianGongGao" v-else  clearable style="width: 100%"  placeholder="请选择" @change="handleChange">
                            <el-option
                              v-for="item in gongGaoList"
                              :key="item.id"
                              :label="item.zhaoHuiBiaoTi"
                              :value="item.id">
                            </el-option>
                          </el-select>

                        </el-form-item>
                        <el-form-item label="基地名称" :label-width="'120px'"  prop="jiDiMingCheng">
                            <el-input v-model="dataSaveForm.jiDiMingCheng" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="产品名称" :label-width="'120px'"  prop="chanPinMingCheng">
                            <el-input v-model="dataSaveForm.chanPinMingCheng" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="生产批号" :label-width="'120px'"  prop="shengChanPiHao">
                            <el-input v-model="dataSaveForm.shengChanPiHao" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="召回时间" :label-width="'120px'"  prop="zhaoHuiShiJian">
<!--                            <el-input v-model="dataSaveForm.zhaoHuiShiJian" autocomplete="off"></el-input>-->
                          <el-date-picker style="width: 100%"
                            v-model="dataSaveForm.zhaoHuiShiJian"
                            type="date">
                          </el-date-picker>
                        </el-form-item>
                        <el-form-item label="召回原因" :label-width="'120px'"  prop="zhaoHuiYuanYin">
                            <el-input type="textarea" v-model="dataSaveForm.zhaoHuiYuanYin" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="召回报告" :label-width="'120px'"  prop="zhaoHuiBaoGao">
<!--                            <el-input v-model="dataSaveForm.zhaoHuiBaoGao" autocomplete="off"></el-input>-->
                          <file-upload v-model="dataSaveForm.zhaoHuiBaoGao" :file-id="dataSaveForm.zhaoHuiBaoGao"></file-upload>
                        </el-form-item>
              <el-form-item label="溯源码" :label-width="'120px'"  prop="suYuanMa">
                <!--                            <el-input v-model="dataSaveForm.suYuanMa" autocomplete="off"></el-input>-->
                <file-upload v-model="dataSaveForm.suYuanMa" :file-id="dataSaveForm.suYuanMa"></file-upload>
              </el-form-item>
                        <el-form-item label="照片" :label-width="'120px'"  prop="zhaoPian">
<!--                            <el-input v-model="dataSaveForm.zhaoPian" autocomplete="off"></el-input>-->
                          <el-upload :action="uploadUrl" multiple
                                     :before-upload="beforeUpload"
                                     :on-success="handleSuccess"
                                     :on-preview="handlePreview"
                                     :on-remove="handleRemove"
                                     :file-list="imgList"
                                     accept=".jpg, .jpeg, .png, .gif"
                                     list-type="picture-card">
                            <i class="el-icon-plus"></i>
                            <el-dialog :visible.sync="showPreview" :modal-append-to-body="false" :modal="false">
                              <img width="100%" :src="picUrl" alt />
                            </el-dialog>
                          </el-upload>
                        </el-form-item>

                        <el-form-item label="处理结果" :label-width="'120px'"  prop="chuLiJieGuo">
                            <el-input v-model="dataSaveForm.chuLiJieGuo" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="评估结果" :label-width="'120px'"  prop="pingGuJieGuo">
                            <el-input v-model="dataSaveForm.pingGuJieGuo" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" :label-width="'120px'"  prop="beiZhu">
                            <el-input type="textarea" v-model="dataSaveForm.beiZhu" autocomplete="off"></el-input>
                        </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="qx()">取 消</el-button>
                <el-button type="primary" @click="dataFormSubmit()">确 定</el-button>
            </div>
        </el-dialog>


        <!-- 弹窗, 新增 / 修改 -->
        <el-dialog title="药材召回召回明细" :visible.sync="infoVisible">
            <div class="mod-config">
                <el-descriptions :column="2" :colon="false" title="药材召回明细" content-class-name="customConten" label-class-name="customelable">
                            <el-descriptions-item label="基地名称">{{this.infoList.jiDiMingCheng}}</el-descriptions-item>
                            <el-descriptions-item label="产品名称">{{this.infoList.chanPinMingCheng}}</el-descriptions-item>
                            <el-descriptions-item label="生产批号">{{this.infoList.shengChanPiHao}}</el-descriptions-item>
                            <el-descriptions-item label="召回时间">{{this.infoList.zhaoHuiShiJian}}</el-descriptions-item>
                            <el-descriptions-item label="召回原因">{{this.infoList.zhaoHuiYuanYin}}</el-descriptions-item>
                            <el-descriptions-item label="召回报告">
                              <el-button size="small" type="success" @click="handleDownload(infoList.zhaoHuiBaoGao)" v-show="infoList.zhaoHuiBaoGao!==''">查看文件</el-button>
                            </el-descriptions-item>
                            <el-descriptions-item label="溯源码">
                              <el-button size="small" type="success" @click="handleDownload(infoList.suYuanMa)" v-show="infoList.suYuanMa!==''">查看文件</el-button>
                            </el-descriptions-item>
                            <el-descriptions-item label="处理结果">{{this.infoList.chuLiJieGuo}}</el-descriptions-item>
                            <el-descriptions-item label="评估结果">{{this.infoList.pingGuJieGuo}}</el-descriptions-item>
                            <el-descriptions-item label="备注">{{this.infoList.beiZhu}}</el-descriptions-item>
                  <el-descriptions-item label="照片" span="3">
                    <el-image   style="width: 200px; height: 200px;padding-right: 10px;"
                              v-for="(item, index) of tuPianDes"
                              :key="index"
                              :src=item
                                :preview-src-list="getPreviewImgList(tuPianDes,index)">
                    </el-image>
                  </el-descriptions-item>
                </el-descriptions>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="qxinfo()">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import ImgUpload from "../../components/upload/ImgUpload.vue";
import fileUpload from "../../components/fileUpload";
    export default {
      components:{
        ImgUpload,
        fileUpload
      },
        data() {
            return {
                dataForm: {
                                jiDiMingCheng:'',
                                chanPinMingCheng:'',
                                shengChanPiHao:'',
                                zhaoHuiShiJian:'',
                                zhaoHuiYuanYin:'',
                                zhaoHuiBaoGao:'',
                                zhaoPian:'',
                                suYuanMa:'',
                                chuLiJieGuo:'',
                                pingGuJieGuo:'',
                                beiZhu:'',
                                guanLianYongHu:'',
                },
                dataSaveForm: {
                  guanLianGongGao:"",
                  guanLianGongGaoBiaoTi:'',
                                jiDiMingCheng:'',
                                chanPinMingCheng:'',
                                shengChanPiHao:'',
                                zhaoHuiShiJian:'',
                                zhaoHuiYuanYin:'',
                                zhaoHuiBaoGao:'',
                                zhaoPian:'',
                                suYuanMa:'',
                                chuLiJieGuo:'',
                                pingGuJieGuo:'',
                                beiZhu:'',
                                guanLianYongHu:'',
                },
                dataRule: {
                  guanLianGongGao:[
                    {required: true, message: '公告不能为空', trigger: 'blur'}
                  ],
                                jiDiMingCheng: [
                                {required: true, message: '基地名称不能为空', trigger: 'blur'}
                            ],
                                chanPinMingCheng: [
                                {required: true, message: '产品名称不能为空', trigger: 'blur'}
                            ],
                                shengChanPiHao: [
                                {required: true, message: '生成批号不能为空', trigger: 'blur'}
                            ],
                                zhaoHuiShiJian: [
                                {required: true, message: '召回时间不能为空', trigger: 'blur'}
                            ],
                                zhaoHuiYuanYin: [
                                {required: true, message: '召回原因不能为空', trigger: 'blur'}
                            ],
                                zhaoHuiBaoGao: [
                                {required: true, message: '召回报告不能为空', trigger: 'blur'}
                            ],
                                zhaoPian: [
                                {required: true, message: '照片不能为空', trigger: 'blur'}
                            ],
                                suYuanMa: [
                                {required: true, message: '溯源码不能为空', trigger: 'blur'}
                            ],
                                chuLiJieGuo: [
                                {required: true, message: '处理结果不能为空', trigger: 'blur'}
                            ],
                                pingGuJieGuo: [
                                {required: true, message: '评估结果不能为空', trigger: 'blur'}
                            ],

                },
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,

                infoList:[],
                infoLoading: false,
                infoVisible: false,
              gongGaoList:[],
              uploadUrl: this.$http.adornUrl('/api-file/file/upload'),
              showPreview: false,
              picUrl:'',
              imgList:[],
              tuPianIds:[],
              tuPianDes:[],
              list1:[],
              isBoolean1: false,
              visibleGongGao:false //修改时公告下拉框不显示  不能修改
            }
        },

        activated() {
          this.getGongGaoList()
            this.getDataList()
        },
        methods: {
          handleDownload(wenJianId) {
            window.open(this.$http.adornUrl('/api-file/file/download/file?fileId=' + wenJianId))
          },
          //处理图片预览效果
          handlePreview(file) {

            console.log('yulan'+file)
            this.picUrl = file.url;
            this.showPreview = true
          },
          beforeUpload(file) {
            const isLt100M = file.size / 1024 / 1024 < 100
            if (!isLt100M) {
              this.$message.error('上传文件大小不能超过 100MB!')
            }
            return isLt100M
          },
          handleSuccess(response, file, fileList) {
            // console.log(file)
            // console.log(fileList)
            if (response && response.code === 0) {
              this.tuPianIds.push(response.data)
            }
          },
          handleRemove(file, fileList) {
            console.log(this.tuPianIds)
            console.log(file)
            console.log(fileList)
            if(file.response){
              this.tuPianIds.remove(file.response.data)
            }else{
              var pid=file.url.substring(file.url.lastIndexOf("=")+1);
              console.log(pid)
              this.tuPianIds = $.grep(this.tuPianIds, function(value) {
                return value != pid;
              });
            }
            // this.deleteFileFire(file)
          },
          getPreviewImgList:function(imgList,index) {
            let arr = []
            let i = 0;
            for(i;i < imgList.length;i++){
              arr.push(imgList[i+index])
              if(i+index >= imgList-1){
                index = 0-(i+1);
              }
            }
            return arr;
          },
          handleChange(val){

            this.dataSaveForm.guanLianGongGaoBiaoTi=this.gongGaoList.find(item =>item.id == val).zhaoHuiBiaoTi
          },
          getGongGaoList(){

            this.gongGaoList=[]
            this.$http({
              url: this.$http.adornUrl('/api-trading/yaoCaiZhaoHui/yaoCaiZhaoHuiZhaoHuiGongGao/allList'),
              method: 'get',
              // params: this.$http.adornParams({})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.gongGaoList = data.data
              } else {
                this.gongGaoList = []
              }
            })
          },
            getDataList(pageIndex) {
                if (pageIndex) {
                    this.pageIndex = pageIndex
                }
                this.dataListLoading = true
                this.$http({
                    url: this.$http.adornUrl('/api-trading/yaoCaiZhaoHui/yaoCaiZhaoHuiZhaoHuiMingXi/list'),
                        method: 'get',
            params: this.$http.adornParams({
                'page': this.pageIndex,
                        'limit': this.pageSize,
                'jiDiMingCheng': this.dataForm.jiDiMingCheng,
                'chanPinMingCheng': this.dataForm.chanPinMingCheng,
                'shengChanPiHao': this.dataForm.shengChanPiHao,
                'zhaoHuiShiJian': this.dataForm.zhaoHuiShiJian,
                'zhaoHuiYuanYin': this.dataForm.zhaoHuiYuanYin,
                'zhaoHuiBaoGao': this.dataForm.zhaoHuiBaoGao,
                'zhaoPian': this.dataForm.zhaoPian,
                'suYuanMa': this.dataForm.suYuanMa,
                'chuLiJieGuo': this.dataForm.chuLiJieGuo,
                'pingGuJieGuo': this.dataForm.pingGuJieGuo,
                'beiZhu': this.dataForm.beiZhu,
                'guanLianYongHu': this.dataForm.guanLianYongHu,
            })
            }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.dataList = data.data.records
                        this.totalPage = Number(data.data.total)
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            qx() {
                this.addOrUpdateVisible = false;

            },
            // 新增 / 修改
            addOrUpdateHandle(id) {
              $(".el-upload-list li").remove();
                this.addOrUpdateVisible = true;
                this.getGongGaoList()
              this.tuPianIds=[]
              this.imgList=[]
                this.$nextTick(() => {
                    this.$refs['dataSaveForm'].resetFields()
                    if (id) {
                       this.visibleGongGao=true
                        this.$http({
                    url: this.$http.adornUrl(`/api-trading/yaoCaiZhaoHui/yaoCaiZhaoHuiZhaoHuiMingXi/getById`),
                                method: 'get',
                                params: this.$http.adornParams({"id":id})
                    }).then(({data}) => {
                            if (data && data.code === 0) {
                                this.dataSaveForm.id = data.data.id
                                this.dataSaveForm.guanLianGongGao=data.data.guanLianGongGao
                                this.dataSaveForm.guanLianGongGaoBiaoTi=data.data.guanLianGongGaoBiaoTi
                                this.dataSaveForm.jiDiMingCheng = data.data.jiDiMingCheng;
                                this.dataSaveForm.chanPinMingCheng = data.data.chanPinMingCheng;
                                this.dataSaveForm.shengChanPiHao = data.data.shengChanPiHao;
                                this.dataSaveForm.zhaoHuiShiJian = data.data.zhaoHuiShiJian;
                                this.dataSaveForm.zhaoHuiYuanYin = data.data.zhaoHuiYuanYin;
                                this.dataSaveForm.zhaoHuiBaoGao = data.data.zhaoHuiBaoGao;
                                this.dataSaveForm.zhaoPian = data.data.zhaoPian;

                              if(data.data.zhaoPian){
                                this.imgList=[]
                                this.tuPianIds=[]
                                var tp=data.data.zhaoPian.split(',')
                                for (let i = 0; i < tp.length; i++) {
                                  this.imgList.push({
                                    url:this.$http.adornUrl('/api-file/file/download/file?fileId=' + tp[i])
                                  })
                                  this.tuPianIds.push(tp[i])
                                }

                              }
                                this.dataSaveForm.suYuanMa = data.data.suYuanMa;
                                this.dataSaveForm.chuLiJieGuo = data.data.chuLiJieGuo;
                                this.dataSaveForm.pingGuJieGuo = data.data.pingGuJieGuo;
                                this.dataSaveForm.beiZhu = data.data.beiZhu;

                            }
                        })
                    }
                })

            },
            qxinfo() {
                this.infoVisible = false;

            },
            // 新增 / 修改
            infoHandle(id) {
                this.infoVisible = true;
                this.infoList=[];
              this.tuPianDes=[];
                this.$http({
            url: this.$http.adornUrl(`/api-trading/yaoCaiZhaoHui/yaoCaiZhaoHuiZhaoHuiMingXi/getById`),
                        method: 'get',
                        params: this.$http.adornParams({"id":id})
            }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.infoList=data.data;
                      if(data.data.zhaoPian){
                        var tp= data.data.zhaoPian.split(",")
                        for (let i = 0; i <tp.length ; i++) {
                          this.tuPianDes.push(
                            this.$http.adornUrl('/api-file/file/download/file?fileId=' + tp[i])
                          )
                        }

                      }
                    }
                })
            },
            // 删除
            deleteHandle(id) {
                var ids = id ? [id] : this.dataListSelections.map(item => {
                    return item.id
                })
                this.$confirm(`确定要进行删除操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl('/api-trading/yaoCaiZhaoHui/yaoCaiZhaoHuiZhaoHuiMingXi/delByIds'),
                            method: 'post',
                            data: this.$http.adornData(ids, false)
                }).then(({data}) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList()
                                }
                            })
                        } else {
                        this.$message.error(data.msg)
                        }
                    })
                })
            },
            // 表单提交
            dataFormSubmit() {
              if(this.tuPianIds){
                this.dataSaveForm.zhaoPian=this.tuPianIds.join(",")
              }
            this.$refs['dataSaveForm'].validate((valid) => {

                    if (valid) {
                        this.$http({
                    url: this.$http.adornUrl(`/api-trading/yaoCaiZhaoHui/yaoCaiZhaoHuiZhaoHuiMingXi/save`),
                                method: 'post',
                    data: this.$http.adornData({
                    'id': this.dataSaveForm.id || undefined,
                      'guanLianGongGao':this.dataSaveForm.guanLianGongGao,
                      'guanLianGongGaoBiaoTi':this.dataSaveForm.guanLianGongGaoBiaoTi,
                        'jiDiMingCheng': this.dataSaveForm.jiDiMingCheng,
                        'chanPinMingCheng': this.dataSaveForm.chanPinMingCheng,
                        'shengChanPiHao': this.dataSaveForm.shengChanPiHao,
                        'zhaoHuiShiJian': this.dataSaveForm.zhaoHuiShiJian,
                        'zhaoHuiYuanYin': this.dataSaveForm.zhaoHuiYuanYin,
                        'zhaoHuiBaoGao': this.dataSaveForm.zhaoHuiBaoGao,
                        'zhaoPian': this.dataSaveForm.zhaoPian,
                        'suYuanMa': this.dataSaveForm.suYuanMa,
                        'chuLiJieGuo': this.dataSaveForm.chuLiJieGuo,
                        'pingGuJieGuo': this.dataSaveForm.pingGuJieGuo,
                        'beiZhu': this.dataSaveForm.beiZhu,

                    })
                    }).then(({data}) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.addOrUpdateVisible = false
                                        this.getDataList()
                                    }
                                })
                            } else {
                            this.$message.error(data.msg)
                            }
                        })
                    }
                })


            },
        }
    }
</script>
<style>
.customConten {
  color: rgb(19 35 29)
}

.customelable {
  color: rgb(19 35 29 / 77%);
  text-align: right;
  width: 120px;
  background-color: #10592a0d;
  font-weight: bold
}
</style>
